<template>
    <div>
        <div>组件通信</div>
        <h3>父子通信</h3>
        <p>
            父组件传递数据之后.子组件用props接收.可以以对象的形式接受,可以设置
            type传递数值的类型. default默认值.
        </p>
        <h3>子往父通信</h3>
        <p>
            子组件通过$emit派发一个自定义事件,父组件接收.然后在方法里面获取传来的值;
            但是当我需要在子组件中修改传递进来的值,是不行的.因为<b>
                单向数据流</b
            >的问题
            这个时候可以传值到父组件修改.或者传值时候使用.sync修饰符.减少父组件的开发
            但是在子组件里面可以通过this.$emit('update:变量来修改')
        </p>
        <h3>兄弟通信</h3>
        <p>
            一个新的vue实例自身的$emit派发的事件.可以通过这个实例的$on方法接收到.
        </p>
        <h3>跨组件通信</h3>
        <p>provider 和 inject</p>

        <children
            ref="childrenDom"
            :value1.sync="value1"
            @sendToParent="getMessage"
        ></children>
        <!-- @changeValue1="getnewValue1" -->
        <brother1></brother1>
        <brother2></brother2>
    </div>
</template>

<script>
import children from "./children.vue";
import brother1 from "./Brother1.vue";
import brother2 from "./Brother2.vue";

export default {
    components: {
        children,
        brother1,
        brother2
    },
    provide() {
        return {
            foo: "祖先信息1",
            foo2: "祖先信息2",
            clickme: this.clickme
        };
    },
    props: {},
    data() {
        return {
            value1: "学生",
            value2: true
        };
    },
    computed: {},
    methods: {
        getMessage(res) {
            console.log("父组件获取的数据", res);
        },
        // getnewValue1(res) {
        //     this.value1 = "辅导员";
        // }
        clickme() {
            console.log("祖先组件被触发");
        }
    },
    created() {
        // setTimeout
        // new Promise((resolve, reject) => {
        //     resolve();
        // }).then(() => {});
        // Promise.resolve().then(()=>{
        // })
        // this.$nextTick(() => {
        //     this.$refs.childrenDom.sendToParent();
        // });
    },
    mounted() {
        console.log("组件", this.$refs.childrenDom);
        // setTimeout(() => {
        // this.$refs.childrenDom.sendToParent();
        // }, 0);
    }
};
</script>
<style scoped></style>
